<script setup>
import { listOrgOptions } from "@/api/v-sys-service/sys-manage/org"
const emits = defineEmits([
    'query',
    'update:modelValue'
])
const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  treeInfo: {
    type: Object,
    default: () => {}
  }
})
const orgName = ref('')
const dataList = ref([])
const TreeRef = ref()
/**
 * 计算树属性
 */
const treeAttrs = computed(()=>{
  const attrs = {
    defaultExpandAll: true,
    expandOnClickNode: false,
    filterNodeMethod: (value,data) => {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
  }
  return { ...attrs, ...props.treeInfo }
})

watch(
    orgName,
    (val) => {
      TreeRef.value.filter(val)
    },
)
const init = () => {
  init_Data()
}
const init_Data = () => {
  const params = {
    pid: '',
    pName: ''
  }
  listOrgOptions(params).then(({data})=>{
    dataList.value = data
  })
}
const handleNodeClick = (data) => {
  emits('update:modelValue',data.value)
  emits('query')
}

/**
 * 组件挂载后
 */
onMounted(() => {
  init()
})
</script>

<template>
  <div class="flex flex-col tree-box">
    <el-input v-model="orgName" placeholder="组织名称" clearable>
      <template #prefix>
        <i-ep-search />
      </template>
    </el-input>
    <el-tree
        :data="dataList"
        ref="TreeRef" class="tree"
        v-bind="Object.assign(treeAttrs,$attrs)"
        @node-click="handleNodeClick"
    />
  </div>
</template>

<style scoped lang="scss">
.tree-box {
  padding: 5px 20px 20px 20px;
  max-width: 300px;
  width: 300px;
  max-height: calc(100vh - 100px);
  .tree {
    overflow-y: scroll;
    margin-top: 0.5rem;
    height: 100%;
  }
}
</style>
